<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html class="app-ui">

<head>
    <!-- Meta -->
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <!-- Document title -->
    <title>我的资金流水</title>

    <meta name="description" content="AppUI - Admin Dashboard Template & UI Framework"/>
    <meta name="author" content="rustheme"/>
    <meta name="robots" content="noindex, nofollow"/>

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/assets/img/favicons/apple-touch-icon.png"/>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/favicons/favicon.ico"/>

    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="${pageContext.request.contextPath}/assets/css/font-awesome.css"/>
    <link rel="stylesheet" id="css-ionicons" href="${pageContext.request.contextPath}/assets/css/ionicons.css"/>
    <link rel="stylesheet" id="css-bootstrap" href="${pageContext.request.contextPath}/assets/css/bootstrap.css"/>
    <link rel="stylesheet" id="css-app" href="${pageContext.request.contextPath}/assets/css/app.css"/>
    <link rel="stylesheet" id="css-app-custom" href="${pageContext.request.contextPath}/assets/css/app-custom.css"/>
    <!-- End Stylesheets -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css" media="all">
</head>

<body class="app-ui layout-has-drawer layout-has-fixed-header">
<div class="app-layout-canvas">
    <div class="app-layout-container">

        <!-- Drawer -->
        <aside class="app-layout-drawer">

            <!-- Drawer scroll area -->
            <div class="app-layout-drawer-scroll" style="margin-top: 50px;">
                <!-- Drawer logo -->
                <div id="logo" class="drawer-header"
                     style="text-align: center;margin: 0 auto;font-family: 华文楷体; padding-top: 20px;">
                    <span style="font-size: 34px;"><strong>我的账户</strong></span>
                </div>

                <!-- Drawer navigation -->
                <nav class="drawer-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item nav-drawer-header">
                            <hr color="#ccc">
                        </li>
                        <li class="nav-item">
                            <a href="javascript:void(0)"><i class="ion-ios-speedometer-outline"></i> <span
                                    style="font-size: 20px;">我的账户流水</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="${pageContext.request.contextPath}/jsp/MyAccount/myInformation.jsp"><i class="ion-ios-monitor-outline"></i> 我的信息</a>
                        </li>
                        <li class="nav-item">
                            <a href="${pageContext.request.contextPath}/jsp/MyAccount/myOrder.jsp"><i class="ion-ios-monitor-outline"></i> 我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a href="${pageContext.request.contextPath}/jsp/MyAccount/myReceiveAddress.jsp"><i class="ion-ios-monitor-outline"></i> 我的收获地址</a>
                        </li>
                        <li class="nav-item">
                            <a href="${pageContext.request.contextPath}/jsp/MyAccount/myOpinion.jsp"><i class="ion-ios-monitor-outline"></i> 我的评价</a>
                        </li>
                    </ul>
                </nav>
                <!-- End drawer navigation -->
            </div>
            <!-- End drawer scroll area -->
        </aside>
        <!-- End drawer -->

        <!-- Header -->
        <header class="app-layout-header">
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#header-navbar-collapse"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout"
                                data-action="sidebar_toggle">
                            <span class="sr-only">Toggle drawer</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="${pageContext.request.contextPath}/jsp/home/frontend_home.jsp">
                            <img class="img-responsive"
                                 src="${pageContext.request.contextPath}/assets/img/logo/logo-frontend.png"
                                 title="强强组合商城" alt="AppUI"/>
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="header-navbar-collapse">
                        <ul id="main-menu" class="nav navbar-nav navbar-left">
                            <li class="">
                                <a href="${pageContext.request.contextPath}/jsp/home/frontend_home.jsp">首页</a>
                            </li>
                            <li class="">
                                <a href="#" data-toggle="dropdown">关于我们</a>
                            </li>
                        </ul>
                        <!-- .navbar-left -->

                        <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
                            <li class="active" id="business">
                                <a href="frontend_home.html">注册为商家</a>
                            </li>
                            <li class="active" id="deliver">
                                <a href="frontend_home.html">注册为配送员</a>
                            </li>
                            <li class="dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">消息</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> 有无内鬼？ </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> 不过如此 </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">公告</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)">登dua郎..</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span class="m-r-sm">${account.accName}<span class="caret"></span></span>
                                    <img class="img-avatar img-avatar-48" src="${pageContext.request.contextPath}/file/acc/${account.accImg == null?"000000011612245316757212.png":account.accImg}" alt="User profile pic" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/jsp/MyAccount/MyMoneyRecord.jsp">个人账户</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/jsp/MyAccount/myBuyCart.jsp">我的购物车</a>
                                    </li>
                                    <li>
                                        <a href="#" id="logout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-right -->
                    </div>
                </div>
                <!-- .container-fluid -->
            </nav>
            <!-- .navbar-default -->
        </header>
        <!-- End header -->

        <main class="app-layout-content">

            <!-- Page Content -->
            <div class="container-fluid p-y-md">
                <!-- Cards API, functionality initialized in App() -> uiCardsApi() -->
                <div class="row">

                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <div class="text-center"
                                     style="font-size: 24px; text-align: center;margin: 0 auto;font-family: 华文楷体;padding-bottom: 10px;">
                                    账户余额：<span class="h3 text-blue">￥<span id="accBalance">11,458,799,999</span></span>
                                    <button class="btn btn-success" style="margin-left: 20px;" type="button" title="充值"
                                            data-toggle="modal"
                                            data-target="#myTopUp"><span>充值</span></button>
                                    <button class="btn btn-success" style="margin-left: 10px;" type="button" title="提现"
                                            data-toggle="modal"
                                            data-target="#MyWithdraw"
                                            ><span>提现</span></button>
                                </div>
                                <div class="text-center form-inline"
                                     style="font-size: 24px; text-align: center;margin: 0 auto;font-family: 华文楷体;">
                                    <div class="form-group">
                                        <div class="form-material">
                                            开始日期:<input id="startDate" style="height: 38px;" type="date"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-material">
                                            至: <input id="endDate" style="height: 38px;" type="date"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-app" type="submit" style="vertical-align:middle;">查询
                                        </button>
                                    </div>
                                </div>

                                <form class="form-horizontal m-t-sm text-center row"
                                      action="base_forms_pickers_select.html" method="post"
                                      onsubmit="return false;">
                                    <div class="form-group col-md-8" style="left: 200px;">

                                    </div>
                                </form>

                                <div class="table-responsive">
                                    <table class="layui-hide" id="demo" lay-filter="test"></table>
                                    <%--用于渲染表格数据--%>
                                </div>
                                <!-- .table-responsive -->
                            </div>
                        </div>
                    </div>
                    <!-- .col-sm-12 -->
                </div>
            </div>
            <!-- .row -->
        </main>

    </div>
    <!-- .app-layout-container -->
</div>
<div class="modal fade" id="myTopUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">充值服务</h5>
            </div>
            <div class="modal-body form-inline" style="text-align: center;margin: 0 auto;font-family: 华文楷体;">
                <div class="form-group" style="font-size: 24px; text-align: center;margin: 0 auto;">
                    <span>
                        <strong>充值金额:</strong>
                    </span>
                </div>
                <div class="form-group text-center" style="text-align: center;margin: 0 auto;">
                    <input type="text" class="form-control" id="TopUpValue" name="name"/>
                </div>
            </div>

            <div class="modal-footer">
                <div class="btn-group" role="group" style="padding-right: 100px;">
                    <button type="button" class="btn btn-primary "
                            data-dismiss="modal"
                            style="width: 90px;" id="topup">确认
                    </button>
                </div>
                <div class="btn-group" role="group" style="margin-right: 120px;">
                    <button type="button" class="btn btn-default " style="width: 90px;" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="MyWithdraw" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">提现服务</h5>
            </div>
            <div class="modal-body form-inline" style="text-align: center;margin: 0 auto;font-family: 华文楷体;">
                <div class="form-group" style="font-size: 24px; text-align: center;margin: 0 auto;">
                    <span>
                        <strong>提现金额:</strong>
                    </span>
                </div>
                <div class="form-group text-center" style="text-align: center;margin: 0 auto;">
                    <input type="text" class="form-control" id="withdrawValue" name="name"/>
                </div>
            </div>

            <div class="modal-footer">
                <div class="btn-group" role="group" style="padding-right: 100px;">
                    <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#ModalTest"
                            data-dismiss="modal"
                            style="width: 90px;" id="esNum">确认
                    </button>
                </div>
                <div class="btn-group" role="group" style="margin-right: 120px;">
                    <button type="button" class="btn btn-default " style="width: 90px;" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalTest" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static" style="width: 200px; margin: 0 auto;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" style="margin: 0 auto;font-family: 华文楷体;">输入支付密码</h5>
            </div>
            <div class="modal-body" style="margin: 0 auto;font-family: 华文楷体;">
                <input type="password" name="Password" id="withdraw" />
            </div>
        </div>
    </div>
</div>
<!-- .app-layout-canvas -->

<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.scrollLock.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.placeholder.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app-custom.js"></script>

<!-- Page JS Plugins -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/masked-inputs/jquery.maskedinput.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/dropzonejs/dropzone.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.js"></script>
<div class="app-ui-mask-modal"></div>

<script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
<script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>

<script type="text/javascript">
    $(function () {
        //商家id
        var accId = ${account.accId};
        var ordStatus = "";
        var accBalance = 0;
        var inPwdNum = 0;//控制密码输入的次数

        getAccBalance(); //查询余额
        getFirstDayOfMonth();
        getCurrentDayOfMonth();

        //得到每月的第一天日期
        function getFirstDayOfMonth() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            if (month < 10) {
                $("#startDate").val(year + "-" + "0" + month + "-" + "01");
            } else {
                $("#startDate").val(year + "-" + month + "-" + "01");
            }
        }

        //得到当前日期
        function getCurrentDayOfMonth() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                if (day < 10){
                    $("#endDate").val(year + "-" + "0" + month + "-" + "0" + day);
                }else {
                    $("#endDate").val(year + "-" + "0" + month + "-" + day);
                }
            } else {
                if (day < 10){
                    $("#endDate").val(year + "-" + month + "-" + "0" + day);
                }else {
                    $("#endDate").val(year + "-" + month + "-" + day);
                }
            }
        }

        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();

        layui.use(['laydate', 'table', 'carousel', 'upload'], function () {
            var laydate = layui.laydate //日期
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传

            showTable();

            function showTable() {
                //执行一个 table 实例
                table.render({
                    elem: '#demo'
                    //    ,height: 500
                    ,
                    url: "/accountInfo/selectFundRecordByAccId?accId=" + accId + "&startDate=" + startDate + "&endDate=" + endDate + "" //数据接口
                    ,
                    title: '用户表'
                    ,
                    page: true //开启分页
                    ,
                    cols: [[ //表头
                        {field: 'numbers', title: '序号', width: 80, type: 'numbers'}
                        , {field: 'recordId', title: '记录id', width: 120, sort: true, hide: true}
                        , {
                            field: 'recordType', title: '交易类型', width: 160,templet: function (d) {
                                if (d.recordType == 2) {
                                    return '<span style="color:#0000FF;">' + '提现' + '</span>'
                                }
                                if(d.recordType == 1) {
                                    return '<span style="color:red;">' + '充值' + '</span>'
                                }
                                if (d.recordType == 3){
                                    return '<span style="color:orange;">' + '购物' + '</span>'
                                }
                                if (d.recordType == 4){
                                    return '<span style="color:red;">' + '销售' + '</span>'
                                }
                                if (d.recordType == 5){
                                    return '<span style="color:green;">' + '佣金' + '</span>'
                                }
                            }
                        }
                        , {field: 'dealAmount', title: '交易金额', width: 160}
                        , {field: 'recordBalance', title: '账户余额', width: 160, totalRow: true}
                        , {
                        field: 'detId', title: '订单编号', width: 400,templet: function (d) {
                                if (d.detId == null) {
                                    return '<span style="color:#0000FF;">' + '无' + '</span>'
                                }else{
                                    return '<span>' + d.detId+ '</span>'
                                }
                            }
                        }
                        , {field: 'addTime', title: '交易时间', width: 160}
                    ]]
                    ,
                    limits: [3, 5, 10]
                    ,
                    limit: 5 //每页默认显示的数量
                });

            }

            /*根据起始日期查询*/
            $("#startDate").change(function () {
                startDate = $(this).val();
                if (startDate > endDate){
                    return false;
                }
                showTable();
            })
            /*根据结束日期查询*/
            $("#endDate").change(function () {
                endDate = $(this).val();
                if (startDate > endDate){
                    return false;
                }
                showTable();
            })

            /*查询已签收*/
            $("#received").click(function () {
                //点击已签收复选框，取消选中已退款复选框
                $("#returned").prop("checked", false);   //checked 属于特殊属性，使用 prop函数
                if ($(this).prop("checked") == true) {    //当已签收复选框 被选中，查已签收订单
                    startDate = $("#startDate").val();
                    ordStatus = 5;
                    showTable();
                } else {                                 //当已签收复选框 取消选中，查所有订单
                    ordStatus = "";
                    showTable();
                }

            })

            /*查询已退款*/
            $("#returned").click(function () {
                //点击已退款复选框，取消选中已签收复选框
                $("#received").prop("checked", false);
                if ($(this).prop("checked") == true) {        //当已退款复选框 被选中，查已退款订单
                    startDate = $("#startDate").val();
                    ordStatus = 9;
                    showTable();
                } else {                                     //当已退款复选框 取消选中，查所有订单
                    ordStatus = "";
                    showTable();
                }
            })

            /*  充值  */
            $("#topup").click(function () {
                var value = $("#TopUpValue").val();
                if (value < 0 || isNaN(value)) {
                    alert("输入的值不是有效值");
                    return false;
                }
                var url = "${pageContext.request.contextPath}/accountInfo/toUPByAccIdAndAccPwd";
                var param = {
                    accId: accId,
                    money: value,
                    _method: "put"
                };
                $.post(url, param, function (data) {
                    if (data.code == 1001) {
                        alert("充值成功！");
                        getAccBalance();
                        showTable();
                    } else {
                        alert("充值失败");
                    }
                });
            });
            /*  提现输入密码  */
            $("#withdraw").keyup(function (){
                var value = $(this).val();

                var withdrawValue = $("#withdrawValue").val();
                if (value.length == 3){
                    var url = "${pageContext.request.contextPath}/accountInfo/withdrawByAccIdAndAccPwd";
                    var param = {
                        accId: accId,
                        accPwd:value,
                        money: withdrawValue,
                        _method: "put"
                    };
                    $.post(url, param, function (data) {
                        if (data.code == 1001) {
                            alert("提现成功！");
                            getAccBalance();
                            showTable();
                            $("#ModalTest").modal('hide');
                        } else {
                            alert("密码错误");
                            inPwdNum = inPwdNum+1;
                            if (inPwdNum >2){
                                $("#ModalTest").modal('hide');
                            }
                        }
                    });
                }
            });
        });



        /*  提现判断  */
        $("#esNum").click(function () {
            var value = $("#withdrawValue").val();
            if (value < 0 || isNaN(value)) {
                alert("输入的值不是有效值");
                return false;
            }
        });

        /*显示余额*/
        function getAccBalance() {
            var url = "${pageContext.request.contextPath}/accountInfo/selectAccBalanceByAccId";
            var param = {
                accId: accId
            };
            $.get(url, param, function (data) {
                $("#accBalance").html(data.accBalance);
                accBalance = data.accBalance;
            });
        }

        /*动态显示首页头部*/
        var role = ${account.role};
        if(role == 2){
            $("#business").html("<a href='../business/UnFinishOrder.jsp'>商家后台</a>");
            $("#deliver").html("");
        }
        if(role == 3){
            $("#business").html("");
            $("#deliver").html("<a href='#'>配送员后台</a>");
        }
        /*退出登录*/
        $("#logout").click(function (event){
            event.preventDefault();
            var url = "/login/logoutShop";
            $.post(url,function (){
                window.location.href = "../../login.jsp";
            })
        })

        //模态框居中问题 start
        function centerModals() {
            $('.modal').each(function (i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 50 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 50);
            });
        }

        // 在模态框出现的时候调用垂直居中方法
        $('.modal').on('show.bs.modal', centerModals);
        // 在窗口大小改变的时候调用垂直居中方法
        $(window).on('resize', centerModals);
        //模态框居中问题end

    });
</script>

</body>

</html>
